import React, { Component } from 'react';
import { Modal, Table } from 'antd';
import { messages, queryCurrencyPrecision } from 'share/common';
import { openModal, removeContainer } from 'components/method/openModal';
import expenseService from '../../my-account/expense.service';
import 'styles/expense/subsidy-modal.scss';

class SubsidyModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subsidyData: [],
      columns: [
        {
          title: messages('common.date')/*日期*/, dataIndex: 'subsidyDetailTime', width: '35%',
          render: value => props.withTime ? value : value.substr(0, 10)
        },
        {
          title: messages('common.amount')/*金额*/, dataIndex: 'amount', width: '15%',
          render: (value, item) => this.filterMoney(value, queryCurrencyPrecision(item.currencyCode))
        },
        {
          title: messages('common.currency.rate')/*汇率*/, dataIndex: 'currencyRate', width: '15%',
          render: value => this.filterMoney(value, 4)
        },
        {
          title: messages('common.base.currency.amount')/*本位币金额*/,
          dataIndex: 'baseCurrencyAmount',
          width: '15%',
          render: value => this.filterMoney(value, queryCurrencyPrecision(props.baseCurrency))
        },
        {
          title: messages('expense-1.key263')/*补贴属性*/, dataIndex: 'travelRule', width: '20%'
        }
      ],
      allowanceColumns: [
        {
          title: messages('expense-1.key134')/*里程*/,
          dataIndex: 'startUnit',
          render: (value, record) => `${value.toFixed(2)}${record.endUnit === -1 ? messages('expense-1.key138')/*以上*/ : ('~' + record.endUnit.toFixed(2))}`
        },
        {
          title: `${messages('common.price')/*单价*/}/${this.props.mileageAllowance ? this.props.mileageAllowance.mileageAllowanceOrders[0].mileageUnit : 'KM'} ${(this.props.mileageAllowance || {}).currency}`,
          dataIndex: 'unitPrice',
          render: (value, record) => this.filterMoney(value, record.currencyCode)
        },
        {
          title: messages('common.amount')/*金额*/,
          dataIndex: 'amount',
          render: (value, record) => this.filterMoney(value, record.currencyCode)
        }
      ],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        onChange: this.onChangePager
      }
    };
  }

  onCancel = () => {
    this.props.afterClose();
  };

  componentDidMount() {
    const { mileageAllowance } = this.props;

    !mileageAllowance && this.onChangePager(1);
  }

  onChangePager = async (current) => {
    const { invoiceOID } = this.props;
    const { pagination } = this.state;
    let subsidyParams = {
      invoiceOID,
      page: current - 1,
      size: 10
    };
    this.setState({ subsidyLoading: true });
    const res = await expenseService.getSubsidy(subsidyParams);
    pagination.current = current;
    pagination.total = Number(res.headers['x-total-count']);
    this.setState({ subsidyData: res.data, subsidyLoading: false, pagination });
  };

  render() {
    const { visible, mileageAllowance, currentExpense, allowanceAmount } = this.props;
    const { subsidyData, columns, subsidyLoading, pagination, allowanceColumns } = this.state;
    return (
      <Modal
        visible={visible}
        title={messages('expense-1.key673')/*补贴详情*/}
        footer={null}
        onCancel={this.onCancel}
        className="subsidy-modal"
        width={760}
      >
        {
          !mileageAllowance && allowanceAmount &&
          <section className="subsidy-modal-allowance">
            <div className="subsidy-modal-allowance-title">
              {messages('expense-1.key674')/*扣减明细*/}
            </div>
            <div className="subsidy-modal-allowance-detail">
              {
                currentExpense.data.filter(item => item.fieldType === 'ALLOWANCE_DEDUCTION' && item.value && item.value !== '0').map(item => <span className="subsidy-modal-allowance-desc">{item.name}：{item.value} {messages('expense-1.key675')/*扣减金额：*/}{currentExpense.invoiceCurrencyCode} {React.Component.prototype.filterMoney(item.uniqueObj.deductionTotal, queryCurrencyPrecision(currentExpense.invoiceCurrencyCode))}</span>)
              }
            </div>
          </section>
        }
        <div className="subsidy-modal-title">
          {messages('expense-1.key304')/*补贴明细*/}
        </div>
        <Table
          dataSource={!mileageAllowance ? subsidyData : mileageAllowance.steps}
          columns={!mileageAllowance ? columns : allowanceColumns}
          loading={subsidyLoading}
          pagination={!mileageAllowance ? pagination : false}
          bordered
          className="subsidy-modal-table"
          size="middle"
          rowKey={(record, index) => index}
          rowClassName={record => record.repeatedFlag ? 'subsidy-modal-repeat' : ''}
        />
      </Modal>
    );
  }
}


SubsidyModal.open = function (props, env) {
  let container;
  const targetProps = {
    ...props,
    visible: true,
    loadWhenMount: true,
    afterClose: () => {
      removeContainer(container);
      container = null;
    }
  };
  container = openModal(SubsidyModal, targetProps, env);
};


SubsidyModal.propTypes = {};

export default SubsidyModal;
